import React from 'react'
import { Redirect, Route, Switch } from 'react-router-dom'
import PropTypes from 'prop-types'

class RouterViewMap extends React.Component{
    render(){
        let router = []
        this.props.routesTable.forEach(item => {
            router.push(
                <Route
                    exact={ item.fullPath === '/' ? true : false }
                    // key={ item.isLayout ? 'isLayout' : item.fullPath }  //一级路由之间切换都会重新初始化layout，使用相同的key可实现layout组件复用
                    key={ 'isLayout' }
                    path={ item.fullPath }
                    render={
                        props => {
                            // if(this.props.route !== undefined && this.props.route.children !== undefined && Array.isArray(this.props.route.children) && this.props.route.children.length){
                            //     let macthRoute = this.props.route.children.filter(_item => {
                            //         return _item.fullPath === props.match.path
                            //     })
                            //     if(macthRoute.length === 1){
                            //         if(macthRoute[0].children === undefined && macthRoute[0].fullPath !== this.props.location.pathname){
                            //             let pathArr = macthRoute[0].fullPath.split('/')
                            //             let isParamsPath = pathArr.filter(item => {
                            //                 return ((item.indexOf(':') === 0) && (item.replace(/:/g, '') !== ''))
                            //             }).length > 0
                            //             if(isParamsPath){  //判断是否为携带参数的路由
                            //                 let pathnameArr = this.props.location.pathname.split('/')
                            //                 if(pathnameArr.length === pathArr.length){
                            //                     let isMacth = true  //路径参数匹配标志
                            //                     for(let i = 0; i < pathArr.length; i++){
                            //                         let isParams = pathArr[i].indexOf(':') === 0 && pathArr[i].replace(/:/g, '') !== ''
                            //                         if(isParams){
                            //                             continue
                            //                         }else{
                            //                             if(pathArr[i] !== pathnameArr[i]){
                            //                                 isMacth = false
                            //                             }
                            //                         }
                            //                     }
                            //                     if(!isMacth){  //当前路径与路由参数匹配不一致
                            //                         return <Redirect to='/404' key='/404' />
                            //                     }
                            //                 }else{
                            //                     return <Redirect to='/404' key='/404' />
                            //                 }
                            //             }else{  //当前路径匹配路由不一致，也不是携带参数的路由
                            //                 return <Redirect to='/404' key='/404' />
                            //             }
                            //         }
                            //     }
                            // }
                            if(item.component){
                                return <item.component {...this.props} {...props} routesTable={ item.children } route={ item } />
                            }
                            if(item.redirect){
                                return <Redirect to={ item.redirect } />
                            }
                            return null
                        }
                    }
                />
            )
        })
        if(this.props.route !== undefined){  //多级路由
            if(this.props.route.fullPath !== this.props.location.pathname){
                router.push(<Redirect to='/404' key='/404' />)
            }
            if(this.props.route.redirect){
                router.push(<Redirect to={ this.props.route.redirect } key={ 'redirect' + this.props.route.redirect } />)
            }
        }
        return (
            <Switch>
                { router }
            </Switch>
        )
    }
}

RouterViewMap.propTypes = {
    routesTable: PropTypes.array,
    route: PropTypes.object,
    location: PropTypes.object
}

function RouterView(props){
    let el = null
    if(props.routesTable !== undefined && Array.isArray(props.routesTable) && props.routesTable.length){
        el = <RouterViewMap {...props} />
    }
    return el
}

export default React.memo(RouterView, (prevProps, nextProps) => {
    return prevProps.location.pathname === nextProps.location.pathname
})